<template>
    <!-- 顶部搜索部分 -->
    <div class="search-box">
        <el-row>
            <el-col :span="21">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </el-col>
            <el-col :span="3">
                <el-button>重置</el-button>
                <el-button type="primary" @click="requestTableData">查询搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <span>账号/姓名:</span>
            <el-input @keyup.enter="requestTableData" v-model="queryPramas.keyword" autocomplete="false"
                placeholder="请输入用户名/昵称" />
        </el-row>
    </div>
    <!-- 添加按钮 -->
    <div class="oprations">
        <el-row>
            <el-col :span="23">

            </el-col>
            <el-col :span="1">
                <el-button type="primary" @click="showFormDialogFn(0)">添加</el-button>
            </el-col>
        </el-row>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="nickName" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createTime" label="添加时间">
            <template #default="{ row }">
                {{ formateTime(row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="最后登录">
            <template #default="{ row }">
                {{ formateTime(row.loginTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="status" label="是否启用">
            <template #default="{ row }">
                <el-switch @change="switchChange(row)" v-model="row.status" :active-value="1" :inactive-value="0" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button v-permission="`allocRole`" type="primary" link @click="allocRoleFn(row.id)">分配角色</el-button>
                <el-button type="primary" link @click="showFormDialogFn(row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 作业： 把这个国际化了的分页，自己封装成一个组件 -->
    <!-- <el-config-provider :locale="zhCn">
        <el-pagination v-model:current-page="queryPramas.pageNum" v-model:page-size="queryPramas.pageSize"
            :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" background
            layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </el-config-provider> -->
    <!-- 封装好的分页 -->
    <Pagination v-model:current-page="queryPramas.pageNum" v-model:page-size="queryPramas.pageSize"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total" />

    <!-- 添加和编辑用户共用的组件 -->
    <EditUser :id="currentUserId" :show="showFromDialog" @close="closeFormDialog" />
    <!-- 分配角色用的弹出框 -->
    <AllocRole :show="showAllocRoleDialog" :id="allocRoleId" @close="closeAllocRoleFn" />
</template>
<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { reactive, ref, toRefs, watch } from 'vue'
import { queryUserListByPageApi, enableUserApi } from '@/api'
import { formateTime } from '@/utils'
import { ElMessage } from 'element-plus'
import EditUser from './components/editUser.vue'
import AllocRole from './components/allocRole.vue'
// import { ElConfigProvider } from 'element-plus'
import axios, { CancelTokenSource } from 'axios'
import Pagination from '@/components/Pagination/index.vue'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const tableData = ref<IUserListModel[]>([])

const currentUserId = ref(0) // 当前用户的id值，用于编辑用户时显示编辑用户页面的页

// const small = ref(false)
// const disabled = ref(false)
const total = ref(0)

const queryPramas = reactive<IQueryUserListParams>({
    keyword: '',
    pageNum: 1,
    pageSize: 10
})

// 在全局定义一个source对象，方便我们在 watch 里面使用它来取消请求
let source: CancelTokenSource;
// 定义一个变量，标记 请求是否正在进行
let getting = false;
const requestTableData = () => {
    getting = true;// 请求正在进行
    // 每次发请求，都新建一个 source 对象
    source = axios.CancelToken.source();// 创建CancelToken对象，用于标记请求是否已经发送过来了。
    // 然后把 sourc的token 值，传递给请求的config
    queryUserListByPageApi(queryPramas, { cancelToken: source.token }).then(res => {
        if (res.code === 200) {
            tableData.value = res.data.list;
            // 修改数据总数
            total.value = res.data.total;
            // 请求结束
        }
    }).finally(() => {
        getting = false;
    })
}
// 向服务器发请求
requestTableData()

const switchChange = (user: IUserListModel) => {
    // console.log(id, status)
    enableUserApi({
        id: user.id, status: user.status
    }).then(res => {
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '修改用户状态成功'
            })
        } else {
            // 把 switch 回归原来的效果
            user.status = user.status === 1 ? 0 : 1;
        }
    })
}


// 添加和编辑的弹出
const showFromDialog = ref(false);
const showFormDialogFn = (id: number) => {
    showFromDialog.value = true;
    currentUserId.value = id;
}
const closeFormDialog = (isReload: boolean) => {
    // 修改父组件控制dialog显示的变量
    showFromDialog.value = false;
    currentUserId.value = 0;
    if (isReload) {
        // 请求表格数据
        requestTableData();
    }
}

const showAllocRoleDialog = ref(false);
const allocRoleId = ref(0);
const allocRoleFn = (id: number) => {
    // 弹出
    showAllocRoleDialog.value = true;
    allocRoleId.value = id;
}

const closeAllocRoleFn = () => {
    showAllocRoleDialog.value = false;
    allocRoleId.value = 0;
}

let { pageNum, pageSize } = toRefs(queryPramas)
watch([pageNum, pageSize], (newVal, oldVal) => {
    // 判断 当页码和页容量同时变化
    // if (newVal[0] !== oldVal[0]) {
    //     requestTableData();
    // } else
    //     // 当前页码不变，但是我们点击 页容量的变化
    //     if (newVal[0] === oldVal[0] && newVal[1] !== oldVal[1]) {
    //         // console.log('当前页码不变，但是我们点击 页容量的变化')
    //         requestTableData();
    //     }

    // 如果采用节流： 是size先变化 , 不能采用节流 ， 如果第一次发送了请求， num: 41 , size: 20 ,后端是没有数据的
    // console.log(newVal, oldVal)
    // 可以选择采用防抖 -- 正确的 -- 大部分情况下是可行的

    // 如果获取表格数据的请求正在进行，就把上一个请求取消
    if (getting) {
        getting = false;
        // axios取消上一个请求
        source.cancel();
    }
    // 把上一个取消后，再发送下一个请求
    requestTableData()
},)
</script>
<style lang="less" scoped>
.search-box {
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #ccc;
    padding: 20px;
    position: sticky;
    top: 0px;
    z-index: 9;
    background-color: #fff;
}

.oprations {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #ccc;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
}
</style>